import {createRouter, createWebHashHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    {
        path: '/particle',
        name: 'particle',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "particle" */ '../views/ParticleClock.vue')
    },
    {
        path: '/rotate_banner',
        name: 'rotate_banner',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "rotate_banner" */ '../views/RotateBanner.vue')
    },
    {
        path: '/svg',
        name: 'svg',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "svg" */ '../views/SvgView.vue')
    },
    {
        path: '/animation',
        name: 'animation',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "animation" */ '../views/AnimationView.vue')
    },
    {
        path: '/smooth',
        name: 'smooth',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "smooth" */ '../views/SmoothView.vue')
    },
    {
        path: '/loadPage',
        name: 'loadPage',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "loadPage" */ '../views/LoadPageView.vue')
    },
    {
        path: '/gsap',
        name: 'gsap',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "gsap" */ '../views/GsapView.vue')
    },
    {
        path: '/box_card',
        name: 'box_card',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "box_card" */ '../views/BoxCardView.vue')
    },
    {
        path: '/BeSSeL',
        name: 'BeSSeL',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "BeSSeL" */ '../views/BeSSeLView.vue')
    },
    {
        path: '/watermark',
        name: 'watermark',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "watermark" */ '../views/WatermarkView.vue')
    },
    {
        path: '/wipcode',
        name: 'wipcode',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "wipcode" */ '../views/WipcodeView.vue')
    },
    {
        path: '/vscode',
        name: 'vscode',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "wipcode" */ '../views/VscodeView.vue')
    },
    {
        path: '/mouse',
        name: 'mouse',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "wipcode" */ '../views/MouseMovementHighlights.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router
